import React, { Component } from "react";
import { Tabs, Carousel } from "antd-mobile";
import { StickyContainer, Sticky } from "react-sticky";
import "./productDetail.css";
import { Link } from "react-router-dom";
import productDetail from "../../api/productDetail/productDetail";
import add from "../../api/productDetail/addProduct";
import cookie from "react-cookies";

// 最大的组件
class ProductDetail extends Component {
  constructor() {
    super();
    this.state = {
      all: [],
      index: "",
      num: 1
    };
  }
  componentDidMount() {
    productDetail.then(res => {
      this.setState({
        all: res.data.data
      });
    });
  }
  getNum(poe) {
    // console.log(poe)
    this.setState({
      num: poe
    });
  }
  render() {
    // console.log(cookie.load("uid"));
    let uid = cookie.load("uid");
    //所有的数据
    let all = this.state.all;

    //获取传递过来的id
    let { location } = this.props;
    let pid = location.state.id;
    // console.log(pid);

    //拿到id匹配的那个值
    let item = all.filter(item => item.pid == pid);
    // console.log(item)

    return (
      <div className="detailWrap">
        <div className="detailTop">商品详情</div>
        <DetailTitle item={item} method={this.getNum.bind(this)} />
        <div className="detailBottom">
          <DetailBottom num={this.state.num} item={item} uid={uid} />
        </div>
      </div>
    );
  }
}

//tab切换
function renderTabBar(props) {
  return (
    <Sticky>
      {({ style }) => (
        <div style={{ ...style, zIndex: 1 }}>
          <Tabs.DefaultTabBar {...props} />
        </div>
      )}
    </Sticky>
  );
}
const tabs = [{ title: "商品信息" }, { title: "商品介绍" }];

const DetailTitle = props => (
  <div>
    <StickyContainer>
      <Tabs
        tabs={tabs}
        initalPage={0}
        renderTabBar={renderTabBar}
        initialPage={0}
        swipeable={false}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            height: "100%",
            backgroundColor: "#fff"
          }}
        >
          <Banner item={props.item} />
          <PhoneMsg item={props.item} method={props.method} />
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            height: "100%",
            backgroundColor: "#fff"
          }}
        >
          <Phonedetail item={props.item} />
        </div>
      </Tabs>
    </StickyContainer>
  </div>
);

//轮播图
class Banner extends Component {
  constructor() {
    super();
    this.state = {
      imgHeight: 176
    };
  }
  render() {
    if (this.props.item.length == 0) {
      return false;
    } else {
      let { item } = this.props;
      return (
        <Carousel
          autoplay={true}
          infinite={true}
          slideWidth="350px"
          cellSpacing={15}
        >
          {item[0].imgUrl.map(val => (
            <a
              key={val}
              style={{
                display: "inline-block",
                width: "100%",
                height: this.state.imgHeight
              }}
            >
              <img
                className="bannerimg"
                src={val}
                style={{ width: "100%", height: "350px", verticalAlign: "top" }}
                onLoad={() => {
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            </a>
          ))}
        </Carousel>
      );
    }
  }
}

//商品信息
class PhoneMsg extends Component {
  constructor() {
    super();
    this.state = {
      num: 1
    };
  }
  changecolor1(e) {
    let color2 = document.querySelector(".color2");
    e.target.style.color = "rgb(202,21,30)";
    e.target.style.border = "1px solid rgb(202,21,30)";
    color2.style.color = "#515151";
    color2.style.border = "1px solid #ccc";
  }
  changecolor2(e) {
    let color1 = document.querySelector(".color1");
    e.target.style.color = "rgb(202,21,30)";
    e.target.style.border = "1px solid rgb(202,21,30)";
    color1.style.color = "#515151";
    color1.style.border = "1px solid #ccc";
  }
  changeNum1(e) {
    if (this.state.num == 1) {
      this.setState({
        num: 1
      });
    } else {
      this.setState({
        num: this.state.num - 1
      });
    }
    let num = document.querySelector(".num");
    if (num.innerHTML > 2) {
      e.target.style.opacity = "1";
    } else if (num.innerHTML == 2) {
      e.target.style.opacity = "0.5";
    }
    this.props.method(this.state.num - 1 || 1);
  }
  changeNum2(e) {
    this.setState({
      num: this.state.num + 1
    });
    let num = document.querySelector(".num");
    let minus = document.querySelector(".minus1");
    if (num.innerHTML > 0) {
      minus.style.opacity = "1 ";
    }
    this.props.method(this.state.num + 1);
  }
  render() {
    if (this.props.item.length == 0) {
      return false;
    } else {
      let item = this.props.item[0];
      return (
        <div>
          <div className="PhoneMsgTitle">
            <p>
              <em>¥</em>
              {item.pprice}
            </p>
            <div>{item.pname}</div>
            <div>{item.introduction}</div>
          </div>
          <div className="phoneMsgColor">
            <div>
              <span>颜色</span>
              <b onClick={this.changecolor1.bind(this)} className="color1">
                {item.color}
              </b>
              <b onClick={this.changecolor2.bind(this)} className="color2">
                {item.color2}
              </b>
            </div>
            <div>
              <span>版本</span>
              <b>{item.version}</b>
            </div>
            <div>
              <span>类型</span>
              <b>官方标配</b>
            </div>
            <div>
              <span>数量</span>
              <i onClick={this.changeNum1.bind(this)} className="minus1" />
              <p className="num">{this.state.num}</p>
              <i onClick={this.changeNum2.bind(this)} />
            </div>
            <hr />
            <div>
              <span>免息</span>
              <b>鲲呗分期直购，最高享6期免息</b>
            </div>
            <hr />
            <div>
              <span>服务</span>
              <b>已满48元包邮 超凡终端 发货&售后</b>
            </div>
          </div>
        </div>
      );
    }
  }
}

//商品介绍
class Phonedetail extends Component {
  render() {
    if (this.props.item.length == 0) {
      return false;
    } else {
      let item = this.props.item[0];
      return (
        <div className="Phonedetail">
          {item.detailImg.map((item1, index) => {
            return <img src={item1} key={index} />;
          })}

          <div>
            <h4>售后服务</h4>
            <ul>
              <li>本产品全宇宙联保，享受三不包服务，质保期为：一日质保</li>
              <li>
                如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，不享受7天内退货，15日内不能换货，15日以上在质保期内享受不免费保修等三不包服务！
              </li>
              <li>售后服务电话：12580</li>
              <li>超凡消费者BG官网：https://www.baidu.com</li>
            </ul>
          </div>
          <div>
            <h4>特别提醒</h4>
            <ul>
              <li>
                以上页面中的产品图片及屏幕内容仅作示意，实物产品效果（包括但不仅限于外观、颜色、尺寸）和屏幕显示内容（包括但不仅限于背景、UI、配图）可能略有差异，请以实物为准。
              </li>
              <li>
                以上页面中的数据为理论值，均来自超凡内部实验室，于特定测试环境下所得（请见各项具体说明），实际使用中可能因产品个体差异、软件版本、使用条件和环境因素不同略有不同，请以实际使用的情况为准。
              </li>
              <li>
                为提供尽可能准确的产品信息、规格参数、产品特性，华为或荣耀可能实时调整和修订以上页面中的文字描述、图片效果等内容，以求与实际产品性能、规格、指数、零部件等信息相匹配，由于产品批次和生产供应因素实时变化，如遇确有进行上述修改和调整必要的情形，恕不专门通知。
              </li>
            </ul>
          </div>
        </div>
      );
    }
  }
}

//底部
class DetailBottom extends Component {
  addP(info, e) {
    if (this.props.uid) {
      add(info).then(res => {
        console.log(res);
      });
    } else {
      alert("请先登录");
    }
  }

  render() {
    if (this.props.item.length == 0) {
      return false;
    } else {
      let { item } = this.props;
      // console.log(item);
      //加入购物车信息
      let info = {
        pid: `${item[0].pid}`,
        pprice: `${item[0].pprice}`,
        pname: `${item[0].pname}`,
        imgUrl: `${item[0].imgUrl[0]}`,
        number: `${this.props.num}`,
        uid: `${this.props.uid}`
      };
      console.log(info);
      return (
        <div className="detailBottom1">
          <div className="bottomBtn">
            <span>
              <Link to="/home">首页</Link>
            </span>
            <span>
              <Link to="/home">购物车</Link>
            </span>
            <span onClick={this.addP.bind(this, info)}>
              <Link to="/home">加入购物车</Link>
            </span>
          </div>
        </div>
      );
    }
  }
}
export default ProductDetail;
